<template>
  <div class="inpx">
    <div>
      学生姓名：
      <el-input v-model="searchDate.stuName" size="small" placeholder="输入搜索名字" class="inp" />
    </div>
    <div>
      市场部：<el-select size="small" placeholder="请选择市场部" v-model="searchDate.origin">
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div>
      学院：<el-select size="small" placeholder="请选择学院" v-model="searchDate.collegeId">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      /></el-select>
    </div>
    <div>
      工作城市：<el-cascader
        placeholder="请选择"
        v-model="searchDate.workCity"
        :options="optionscity"
        @change="handleChange"
      />
    </div>
    <el-button type="primary" @click="sousuo">搜索</el-button>
  </div>
</template>

<script setup>
import { defineEmits, defineProps, computed } from 'vue'
import CityData from '../../components/CityData.json'
const props = defineProps({
  searchDate: {
    type: Object,
    default: () => {}
  }
})
//option学院
const options = [
  {
    value: 0,
    label: '请选择'
  },
  {
    value: 2,
    label: '网站工程学院'
  },
  {
    value: 1,
    label: '游戏学院'
  }
]
//option市场部
const options1 = [
  {
    value: 0,
    label: '请选择'
  },
  {
    value: '招生办',
    label: '招生办'
  },
  {
    value: '晋中市场部',
    label: '晋中市场部'
  },
  {
    value: '中原市场部',
    label: '中原市场部'
  },
  {
    value: '辽宁市场部',
    label: '辽宁市场部'
  }
]
//城市
const optionscity = CityData.map((item, index) => {
  let props = {
    value: item.code,
    label: item.label
  }
  if (item.children) {
    props.children = item.children.map((v, i) => ({
      value: v.code,
      label: v.label,
      children: v.children
        ? v.children.map((chid) => ({
            value: chid.code,
            label: chid.label
          }))
        : []
    }))
  }
  return props
})
// const optionscity = CityData.map((item, index) => {
//   let props = { ...item }
//   props.value = item.code
//   props.label = item.label
//   if (item.children) {
//     props.children = item.children.map((v, i) => {
//       return {
//         value: v.code,
//         label: v.label
//       }
//     })
//   }
//   return props
// })
//城市数据
// console.log(CityData, optionscity, '11111')
const emit = defineEmits(['toworkhandleChange', 'toworksou'])
//城市码
const handleChange = (val) => {
  emit('toworkhandleChange', props.searchDate.workCity)
}
//搜索事件
const sousuo = () => {
  emit('toworksou')
}
</script>

<style scoped lang="scss">
.inpx {
  width: 80%;
  height: 40px;
  display: flex;
  align-items: center;
  div {
    width: 30%;
  }
}
</style>